<template>
  <div class="card_album_page">
    <van-nav-bar title="集卡册" left-text="" left-arrow @click-left="back" />
    <!-- <van-popup v-model:show="visible" round class="" @close="close"> -->
    <div class="card_album_box flex flex-items-center">
      <div class="cards">
        <div v-for="card in state.info" :key="card.guid" class="card">
          <img class="card_img" :src="cardBaseUrl + card.pic" alt="">
          <div class="card_title">
            <img src="https://jwc-static.jdwxk.com/imgs/map/card_title_bg.png" alt="">
            <span>{{ card.name }}</span>
          </div>
        </div>
      </div>
      <!-- <div class="title">
            <img src="https://jwc-static.jdwxk.com/imgs/map/cards_head_icon.png" alt="">
          </div> -->
      <!-- <div class="close flex flex-justify-center flex-items-center" @click="close">
            <img src="https://jwc-static.jdwxk.com/imgs/map/close.png" alt="">
          </div> -->
      <!-- <div class="tip">
            AR扫码标志性物品会有惊喜哦～
          </div> -->
    </div>
    <!-- </van-popup> -->
  </div>
</template>

<script setup>
import { onMounted, reactive } from 'vue'
import { useRouter } from 'vue-router'

import { getAllCards } from '@/api/activities'
import { useUserStoreWidthOut } from '@/store/modules/user'

const userStore = useUserStoreWidthOut()
const userInfo = computed(() => userStore.getUserInfo)

const router = useRouter()

const state = reactive({
  info: null,
})
const cardBaseUrl = ref(import.meta.env.VITE_GLOB_IMG_URL)
async function getInfo() {
  const res = await getAllCards({ size: 100, phone: userInfo.value.phone })
  if (res.code === 200) {
    state.info = res.data.records
  }
}
//   function close() {
//     state.guid = ''
//     state.info = null
//     visible.value = false
//   }
function back() {
  router.back()
}
onMounted(() => {
  getInfo()
})
</script>

<style lang="scss">
.card_album_page {
  color: #333333;

  .van-overlay {
    width: 100vh;
    height: 100vw;
    left: 0;
  }

  .van-popup {
    max-width: none;
    height: calc(60vw + 60px);
    background-color: transparent !important;
    overflow: visible;
  }

  .box {
    border-bottom: 27px solid white;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    transform: rotate(180deg);
    width: 52px;
    margin-top: -1px;
    margin-left: calc(25vh - 26px);
  }

  .card_album_box {
    width: 100%;
    box-sizing: border-box;
    //   width: 547px;
    //   height: 274px;
    position: relative;
    //   background: url('https://jwc-static.jdwxk.com/imgs/map/cards_bg.png');
    //   background-size: contain;
    //   background-repeat: no-repeat;
    width: 100vw;
    height: calc(100vh - min(12.267vw, 73.6px));
    background-image: url('https://jwc-static.jdwxk.com/imgs/activities/cardAlbum_bg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .title {
      position: absolute;
      top: -6px;
      left: 7.5px;

      img {
        width: 140px;
        height: 30px;
      }
    }

    .close {
      position: absolute;
      right: 0;
      top: 0;
      width: 48px;
      height: 38px;

      img {
        width: 18px;
        height: 18px;
      }
    }

    .tip {
      transform: translateX(-50%);
      position: absolute;
      left: 50%;
      bottom: 13px;
    }

    .cards {
      width: 300px;
      height: 50vh;
      // height: 196px;
      overflow-y: scroll;

      margin: 20px auto;
      margin: -11px auto 0 auto;
      display: flex;
      flex-wrap: wrap;
      column-gap: 11.5px;
      row-gap: 15px;
      align-items: flex-start;
      padding-top: 40px;

      .card {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        width: 90px;
      }

      .card_img {
        border-radius: 6px;
        border: 2.5px solid #d1af7d;
        width: 90px;
        height: 67.5px;
      }

      .card_title {
        margin: -10px auto 0 auto;
        position: relative;

        img {
          width: 76.5px;
          height: 19px;
        }

        span {
          position: absolute;
          left: 50%;
          top: 0;
          width: 100%;
          text-align: center;
          color: white;
          transform: translateX(-50%);
          line-height: 20px;
          font-size: 10px !important;
        }
      }
    }
  }
}
</style>
